<template>
  <div id="app">
    <div style="display: none">
      <img src="./images/bg.jpg" />
    </div>
    <div id="container"></div>
    <MoveLightDot
      :height="10"
      :width="200"
      style="position: absolute; top: 100px; left: 100px"
    ></MoveLightDot>
    <Rabar
      :height="200"
      :width="200"
      style="position: absolute; top: 200px; left: 200px"
    ></Rabar>
    <Spread
      :height="200"
      :width="200"
      style="position: absolute; top: 200px; left: 500px"
    ></Spread>
  </div>
</template>
<script>
import Konva from "konva";
import MoveLightDot from "./moveLightDot";
import Rabar from "./rabar";
import Spread from "./spread";

export default {
  components: {
    MoveLightDot,
    Rabar,
    Spread,
  },
  data() {
    return {
      stage: null,
      layer: null,
    };
  },
  mounted() {
    this.stage = new Konva.Stage({
      container: "container",
      width: window.innerWidth,
      height: window.innerHeight,
    });
    // add canvas element
    let layer = new Konva.Layer();
    this.stage.add(layer);

    //backGroup;
    let bgImage = new Konva.Image({
      x: 0,
      y: 0,
      image: document.querySelectorAll("img")[0],
      width: window.innerWidth,
      height: window.innerHeight,
    });
    layer.add(bgImage);
    layer.draw();
  },
  methods: {},
};
</script>
